'use client'

import React from 'react'
import { useRouter } from 'next/navigation'
import { Button, Card, Space, Typography } from 'antd'
import {
    HeartOutlined,
    RadarChartOutlined,
    EyeOutlined,
    MedicineBoxOutlined,
    ScanOutlined
} from '@ant-design/icons'
import { useUIStore } from '@/stores/uiStore'

const { Title, Text } = Typography

// 数据集配置
const datasets = [
    {
        id: '1',
        name: '胸部CT',
        description: '胸部CT影像数据集，用于肺部病灶检测',
        icon: <HeartOutlined />,
        color: '#1890ff'
    },
    {
        id: '2',
        name: '脑部MRI',
        description: '脑部MRI影像数据集，用于脑部结构分析',
        icon: <RadarChartOutlined />,
        color: '#52c41a'
    },
    {
        id: '3',
        name: '腹部CT',
        description: '腹部CT影像数据集，用于腹部器官分析',
        icon: <ScanOutlined />,
        color: '#faad14'
    },
    {
        id: '4',
        name: '心脏超声',
        description: '心脏超声影像数据集，用于心脏功能评估',
        icon: <HeartOutlined />,
        color: '#f5222d'
    },
    {
        id: '5',
        name: '乳腺X光',
        description: '乳腺X光影像数据集，用于乳腺癌筛查',
        icon: <EyeOutlined />,
        color: '#722ed1'
    }
]

export const Toolbox: React.FC = () => {
    const router = useRouter()
    const { selectedDataset, setSelectedDataset } = useUIStore()

    const handleDatasetClick = (datasetId: string) => {
        setSelectedDataset(datasetId)
        router.push(`/dataset/${datasetId}`)
    }

    return (
        <div className="toolbox h-full flex flex-col fade-in">
            {/* 头部 - 在小屏幕上可折叠 */}
            <div className="toolbox-header p-3 lg:p-4 border-b slide-in">
                <Title level={4} className="mb-1 lg:mb-2 text-base lg:text-lg">
                    <MedicineBoxOutlined className="mr-2" />
                    数据集选择
                </Title>
                <Text type="secondary" className="text-xs lg:text-sm hidden sm:block">
                    选择一个数据集开始分析
                </Text>
            </div>

            {/* 内容区域 - 响应式网格布局 */}
            <div className="toolbox-content flex-1 p-2 lg:p-4 overflow-y-auto">
                {/* 小屏幕上使用水平滚动，大屏幕上使用垂直布局 */}
                <div className="lg:hidden">
                    <div className="flex space-x-2 overflow-x-auto pb-2">
                        {datasets.map((dataset) => (
                            <Card
                                key={dataset.id}
                                hoverable
                                size="small"
                                className={`
                                    flex-shrink-0 w-32 cursor-pointer transition-all duration-300 hover-lift
                                    ${selectedDataset === dataset.id
                                        ? 'border-blue-500 shadow-md selected scale-in'
                                        : 'border-gray-200 hover:border-blue-300'
                                    }
                                `}
                                onClick={() => handleDatasetClick(dataset.id)}
                                styles={{ body: { padding: '8px' } }}
                            >
                                <div className="text-center">
                                    <div
                                        className={`w-8 h-8 mx-auto mb-2 rounded-lg flex items-center justify-center text-white text-sm dataset-icon transition-all duration-300 ${selectedDataset === dataset.id ? 'pulse' : ''
                                            }`}
                                        style={{ backgroundColor: dataset.color }}
                                    >
                                        {dataset.icon}
                                    </div>
                                    <div className="text-xs font-medium text-gray-900 truncate">
                                        {dataset.name}
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>

                {/* 大屏幕上使用垂直布局 */}
                <div className="hidden lg:block">
                    <Space direction="vertical" size="middle" className="w-full">
                        {datasets.map((dataset) => (
                            <Card
                                key={dataset.id}
                                hoverable
                                size="small"
                                className={`
                                    cursor-pointer transition-all duration-300 hover-lift btn-ripple
                                    ${selectedDataset === dataset.id
                                        ? 'border-blue-500 shadow-md selected scale-in'
                                        : 'border-gray-200 hover:border-blue-300 hover-glow'
                                    }
                                `}
                                onClick={() => handleDatasetClick(dataset.id)}
                                styles={{ body: { padding: '12px 16px' } }}
                            >
                                <div className="flex items-center space-x-3">
                                    <div
                                        className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-white text-lg dataset-icon transition-all duration-300 ${selectedDataset === dataset.id ? 'pulse' : ''
                                            }`}
                                        style={{ backgroundColor: dataset.color }}
                                    >
                                        {dataset.icon}
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <div className="font-medium text-gray-900 truncate">
                                            {dataset.name}
                                        </div>
                                        <div className="text-sm text-gray-500 mt-1 line-clamp-2">
                                            {dataset.description}
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </Space>
                </div>
            </div>

            {/* 底部信息 - 在小屏幕上隐藏 */}
            <div className="toolbox-footer p-3 lg:p-4 border-t bg-gray-50 hidden sm:block">
                <Text type="secondary" className="text-xs">
                    共 {datasets.length} 个数据集可用
                </Text>
            </div>
        </div>
    )
}

export default Toolbox